<template>
<Navbar>
  <Logo />
</Navbar>

<Main>
<!-- 左边电影 -->
    <Box closeString="热映中"
      openString="即将上映"
      :handleSwitchComponent="handleSwitchComponent">
       <Loading  v-if ="isLoading" />
      <MovieList  v-show="!isLoading" :movies="movies" :handleSelectMovie="handleSelectMovie" />
    </Box>
<!-- 右边已看 -->
    <Box>
      <section v-if="!selectedID">
        <WatchedSummary :watched />
        <WatchedList :watched="watched" :handleDeleteWatchedMovie="handleDeleteWatchedMovie" />
      </section>
      <MovieDetail v-else :selectedId="selectedID" :onCloseMovie="handleCloseMovie" :onAddWatched="handleAddWatched" :watched="watched" />
    </Box>
</Main>

</template>

<script>
import Navbar from "@/components/Navbar.vue";
import Logo from "@/components/Logo.vue";
import Main from "@/components/Main.vue";
import Box from "@/components/Box.vue";
import Loading from "@/components/Loading.vue";
import MovieList from "@/components/MovieList.vue";
import WatchedSummary from "@/components/WatchedSummary.vue";
import WatchedList from "@/components/WatchedList.vue";
import MovieDetail from "@/components/MovieDetail.vue";

const tempWatchedList = [
  {
    id: 1294273,
    img: "https://p0.pipi.cn/mediaplus/friday_image_fe/0fa334520515c28b0793b67ea7fad03b546ff.jpg?imageMogr2/quality/80",
    nm: "哪吒之魔童闹海",
    rt: "2025-01-29",
    sc: 9.8,
  },
];

export default {
  data() {
    return {
      hotMovies: [],
      comingMovies: [],
      watched: [],
      isLoading: false,
      componentName: "Hot",
      selectedID: null,
    };
  },

  methods: {
    handleSelectMovie(id) {
      if(this.selectedID === id){
        this.selectedID = null;
        return;
      }
      this.selectedID = id;
    },

    handleCloseMovie() {
      this.selectedID = null;
    },

    handleAddWatched(movie) {
      this.watched.push(movie);
    },

    handleSwitchComponent() {
      this.componentName = this.componentName === "Hot" ? "Coming" : "Hot";
    },
    handleDeleteWatchedMovie(movieId) {
      this.watched = this.watched.filter((movie) => movie.id !== movieId);
    }
  },

  computed: {
    movies() {
      return this.componentName === "Hot" ? this.hotMovies : this.comingMovies;
    },
  },

  components: {
    Navbar,
    Logo,
    Main,
    Box,
    Loading,
    MovieList,
    WatchedSummary,
    WatchedList,
    MovieDetail,
  },

  async mounted() {
    this.isLoading = true;

    const hotMovieResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL}/movieOnInfoList`);
    const hotMovieData = await hotMovieResponse.json();

    const comingMovieResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL}/comingList?ci=10&token=&limit=10`);
    const comingMovieData = await comingMovieResponse.json();

    this.hotMovies = hotMovieData.movieList;
    this.comingMovies = comingMovieData.coming;

    //从localStorage中获取已看电影列表
    const watchedMovieList = localStorage.getItem("watched-movie-list");
    if(!watchedMovieList){
      localStorage.setItem("watched-movie-list", JSON.stringify([]));
    } else {
      //将localStorage中的已看电影列表字符串解析为JS对象
      this.watched = JSON.parse(watchedMovieList);
    }

    this.isLoading = false;
  },
};
</script>